$(function () {
    load()
    $('#title').on('keydown', function (e) {
        if (e.keyCode === 13) {
            var local = getDate()
            // console.log(local);
            local.push({
                title: $(this).val(),
                done: false
            })
            setData(local)
            load()
        }

    })

    // 删除数据 
    $('ol,ul').on('click', 'a', function () {
        var data = getDate()
        var index = $(this).attr('index')
        // 从浏览器内存中删除数据
        data.splice(index, 1)
        // 重新保存删除后的数组
        setData(data)
        // 重新渲染
        load()
    })
    // 正在进行和已经完成的
    $('ol,ul').on('click', 'input', function () {
        // 获取数据
        var data = getDate()
        // 修改数据
        var index = $(this).siblings('a').attr('index')
        data[index].done = $(this).prop('checked')
        // console.log(data);
        // 存储数据
        setData(data)
        // 渲染数据
        load()
    })

    function getDate() {
        var data = localStorage.getItem('todolist');
        if (data !== null) {
            return JSON.parse(data);
        } else {
            return [];
        }
    }

    function setData(data) {
        localStorage.setItem('todolist', JSON.stringify(data))
    }

    // 渲染加载数据
    function load() {
        var data = getDate()
        // 清空ol里面的li
        var count = 0;
        var docount = 0;
        $('ol ,ul ').empty()
        $.each(data, function (i, ele) {

            if (ele.done) {
                var li = $(`<li>
                 <input type="checkbox" checked= 'checked '>
                <p>${ele.title}</p>
                <a href="#" index = ${i}></a>
         </li>`)
                $('ul').prepend(li)
                count++;
            } else {
                var li = $(`<li>
                <input type="checkbox">
                <p>${ele.title}</p>
                <a href="#" index = ${i}></a>
            </li>`)
                $(`ol`).prepend(li)
                docount++;
            }
        })

        $('#todocount').html(docount)
        $('#donecount').html(count)
    }
})